import React, { lazy } from "react";
import { connect } from 'react-redux';
import { message } from 'antd';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import {Switch,Route} from "react-router-dom"

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const Myheader = lazy(async ()=>import("./myheader"))
const Leftnav = lazy(async ()=>import("./leftnav"))
const Addemail = lazy(async ()=>import("./editemail/index"))
const Vieweamil = lazy(async ()=>import("./viewemail/index"))
const Ceshi = lazy(async ()=>import("./ceshi/ceshi"))
const Wenjuan = lazy(async ()=>import("./wenjuan/index"))
// const Ceshi = lazy(async ()=>import("../components/ceshi"))
// const Ceshi2 =lazy(async ()=>import("../components/ceshi2"))

class Shouye extends React.Component {
    constructor(props) {
        super(props);
        this.state = { date: new Date() };
    }
    // 初始化的时候，判断用户是否登录，如果没有，跳转到登录页
    componentDidMount(){
        console.log(this.props,"props都有什么");
        if(!this.props.userid){
            message.error("请先登录",1)
            this.props.history.replace("/login")
        }
    }
    render() {
        return (
            <div className="w-screen h-screen relative">
                <div className="absolute top-0 left-0 right-0 h-10">
                    <Myheader></Myheader>
                </div>
                <div className="absolute top-10 left-0 bottom-0 w-150px bg-true-gray-300">
                    <Leftnav></Leftnav>
                </div>
                <div className="absolute top-10 left-150px bottom-0 right-0 bg-gray-100">
                    <Switch>
                        <Route path="/add/:type" component={Addemail} />
                        <Route path="/view/:type" component={Vieweamil} />
                        <Route path="/ceshi/:type" component={Ceshi} />
                        <Route path="/wenjuan/:type" component={Wenjuan} />
                    </Switch>
                </div>
            </div>
        )
    }
}

const stateToProps = (state) => {
    return {
        userid: state.user.id,
    }
}

//3.这里把action里的方法绑定到props上，可以通过Props使用，一般用于修改store里的数据
const dispatchTOProps = (dispatch) => {
    return {
        
    }
}

export default connect(stateToProps, dispatchTOProps)(Shouye);